<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌单页面</title>
    <link rel="stylesheet" href="assets/css/base.css">
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/playList.css">
</head>

<body>
    <div class="g-bd">
        <div class="g-wrap">
            <div class="n-hot">
                <h3 class="rmd-title">
                    <span class="s-fc">全部</span>
                    <a href="javascript:;" class="btn-menu">选择分类
                        <span></span>
                    </a>
                </h3>
                <a href="javascript:;" class="more" id="hotPlayList">热门</a>
            </div>
            <div class="g-wrap2">

            </div>
        </div>
    </div>

    <!-- 渲染热门歌单前50首 -->
    <script type="text/html" id="playlist-hot">
        <ul class="m-cvrlst">
            {{each playlists}}
            <li>
                <div class="u-cover">
                    <img src="{{$value.coverImgUrl}}" alt="">
                </div>
                <p class="dec">
                    <a href="javascript:;">{{$value.name}}</a>
                </p>
                <p class="dec">
                    <a href="javascript:;" class="user-playlist">{{$value.creator.nickname}}</a>
                </p>
                <div class="u-bottom">
                    <a href="javascript:;" class="icon-play"></a>
                    <span class="icon-headset"></span>
                    <span class="nb">{{$value.playCount | getInt}}万</span>
                </div>
            </li>
            {{/each}}
        </ul>

        <!-- 分页功能 -->
        <div class="m-pl-pager">
            <div class="u-page">
                <a href="javascript:;" class="btn prv-page">上一页</a>
                <span id="cunt">....</span>
                <a href="javascript:;" class="btn nxt-page">下一页</a>
            </div>
        </div>
    </script>

    <script src="assets/lib/jquery.js"></script>
    <script src="assets/lib/axios.js"></script>
    <script src="assets/lib/template-web.js"></script>
    <script src="assets/js/base.js"></script>
    <script src="assets/js/playList.js"></script>
</body>

</html>